<template>
	<div class="music-list">
		<div class="back" @click="backTo">
			<i class="icon-back"></i>
		</div>
		<h1 class="title" v-html="title"></h1>
		<div ref="bgPic" class="bg-image" :style="bgStyle">
			<div class="play-wrapper">
				<div ref="playBtn" class="play" v-show="songs.length" @click="randomPlaying">
					<i class="icon-play"></i>
					<span class="text">随机播放全部</span>
				</div>
			</div>
			<div ref="filter" class="filter"></div>
		</div>
		<div ref="layer" class="bg-layer"></div>
		<scroll
			ref="list"
			class="list"
			:data="songs"
			:probe-type="3"
			:listen-scroll="true"
			@scroll="scroll"
		>
			<div class="song-list-wrapper">
				<song-list :rank="rank" :songs="songs" @select="selectSong"></song-list>
			</div>
			<div class="loading-container">
				<loading v-show="!songs.length"></loading>
			</div>
		</scroll>
	</div>
</template>

<script>
	import Scroll from '@/base/scroll/scroll';
	import SongList from '@/base/song-list/song-list';
	import Loading from '@/base/loading/loading';
	import { prefixStyle } from '@/common/js/dom';
	import { playlistMixin } from '@/common/js/mixin';
	import { mapMutations, mapGetters, mapActions } from 'vuex';

	const transform = prefixStyle('transform');
	const backdrop = prefixStyle('backdrop-filter');
	const MIN_SCROLL_TOP = 40;

	export default {
		name: 'MusicList',
		data() {
			return {
				scrollY: 0
			}
		},
		mixins: [playlistMixin],
		props: {
			bgImage: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			songs: {
				type: Array,
				default: () => []
			},
			rank: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			bgStyle() {
				return `background-image: url(${this.bgImage})`;
			},
			...mapGetters(['playlist', 'currentIndex'])
		},
		watch: {
			scrollY(newY) {
				let zIndex = 0;
				let scale = 1;
				let blur = 0;
				let translateY = Math.max(this.minTranslateY, newY);
				let percent = Math.abs(newY / this.imageHeight);
				this.$refs.layer.style[transform] = `translate(0, ${translateY}px)`;
				if (newY > 0) {
					scale += percent;
					zIndex = 10;
				} else {
					blur = Math.min(20 * percent, 20);
				}
				this.$refs.filter.style[backdrop] = `blur(${blur}px)`;
				if (newY < this.minTranslateY) {
					zIndex = 10;
					this.$refs.bgPic.style.paddingTop = 0;
					this.$refs.bgPic.style.height = `${MIN_SCROLL_TOP}px`;
					this.$refs.playBtn.style.display = 'none';
				} else {
					this.$refs.bgPic.style.paddingTop = '70%';
					this.$refs.bgPic.style.height = 0;
					this.$refs.playBtn.style.display = 'block';
				}
				this.$refs.bgPic.style.zIndex = zIndex;
				this.$refs.bgPic.style[transform] = `scale(${scale})`;
			}
		},
		methods: {
			handlePlaylist(playlist) {
				const bottom = playlist.length ? '60px' : '';
				this.$refs.list.$el.style.bottom = bottom;
				this.$refs.list.refresh();
			},
			backTo() {
				this.$router.go(-1);
			},
			scroll(pos) {
				this.scrollY = pos.y;
			},
			selectSong(song, index) {
				this.selectPlay({
					list: this.songs,
					index
				});
				this.setCurrentSong(song);
			},
			randomPlaying() {
				this.randomPlay({
					list: this.songs
				});
				this.setCurrentSong(this.playlist[this.currentIndex]);
			},
			...mapMutations({
				setCurrentSong: 'SET_CURRENT_SONG',
			}),
			...mapActions([
				'selectPlay',
				'randomPlay'
			])
		},
		mounted() {
			this.imageHeight = this.$refs.bgPic.clientHeight;
			this.minTranslateY = -this.imageHeight + MIN_SCROLL_TOP;
			this.$refs.list.$el.style.top = `${this.imageHeight}px`;
		},
		components: {
			Scroll,
			SongList,
			Loading
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/stylus/variable"
	@import "../../common/stylus/mixin"
	
	.music-list
		position: fixed
		z-index: 100
		top: 0
		left: 0
		bottom: 0
		right: 0
		background: $color-background
		.back
			position: absolute
			z-index: 50
			top: 10px
			left: 10px
			z-index: 102
			.icon-back
				display: block
				padding: 10
				font-size: $font-size-large-x
				color: $color-theme
		.title
			position: absolute
			top: 0
			left: 10%
			z-index: 102
			width: 80%
			no-wrap()
			text-align: center
			line-height: 40px
			font-size: $font-size-large
			color: $color-text
		.bg-image
			position: relative
			width: 100%
			height: 0
			padding-top: 70%
			transform-origin: top
			background-size: cover
			.play-wrapper
				position: absolute
				bottom: 20px
				z-index: 50
				width: 100%
				.play
					box-sizing: border-box
					width: 135px
					padding: 7px 0
					margin: 0 auto
					text-align: center
					border: 1px solid $color-theme
					color: $color-theme
					border-radius: 100px
					font-size: 0
					.icon-play
						display: inline-block
						vertical-align: middle
						margin-right: 6px
						font-size: $font-size-medium-x
					.text
						display: inline-block
						vertical-align: middle
						font-size: $font-size-small
			.filter
				position: absolute
				left: 0
				top: 0
				width: 100%
				height: 100%
				background: rgba(7, 17, 27, 0.4)
		.list
			position: fixed
			top: 0
			bottom: 0
			width: 100%
			background: $color-background
			.song-list-wrapper
				padding: 20px 30px
			.loading-container
				position: absolute
				width: 100%
				top: 50%
				transform: translateY(-50%)
		.bg-layer
			position: relative
			height: 100%
			background: $color-background
</style>